<template>
  <!-- 发布页面 -->
  <view>
    <uni-nav-bar statusBar status-bar left-icon="left" @clickLeft="clickLeft">
      <view
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          font-size: 28rpx;
        "
      >
        <picker @change="topClick" :value="1" :range="topList">
          {{ topList[isopen] }}
          <text
            class="iconfont icon-shezhi"
            style="color: #000; margin-left: 5px"
          ></text>
        </picker>
      </view>
    </uni-nav-bar>

    <view class="content">
      <!-- 内容 -->
      <textarea name="" placeholder="说一句话吧~~" v-model="text"></textarea>
      <!-- 选择分类 -->
      <view style="margin-bottom: 20px">
        <text
          class="font"
          style="padding: 5px 15px; border: 1px solid #ccc; border-radius: 30px"
        >
          {{ classify }}
        </text>
      </view>
      <!-- 选择话题 -->
      <view class="mt" style="margin-bottom: 20px">
        <text
          class="font"
          style="
            padding: 5px 15px;
            border: 1px solid #ccc;
            width: 200rpx;
            border-radius: 30px;
          "
          >{{ topic }}</text
        >
      </view>
      <!-- 上传图片 -->
      <upimg
        @chang="imgList"
        :imgLists="imgLists"
        ref="upimg"
        :isShow="isShow"
      ></upimg>

      <!-- 底部 -->
      <view class="bottom">
        <view class="b-left flex">
          <picker @change="bindPickerChange" :value="index" :range="classData">
            <text class="iconfont icon-caidan"></text>
          </picker>

          <text class="iconfont icon-huati" @click="clicktoPic"></text>
          <text class="iconfont icon-tupian" @click="upimg"></text>
        </view>
        <view class="b-right" @click="publish"> 发布 </view>
      </view>
      <!-- 弹出层 -->
    </view>
  </view>
</template>

<script>
import upimg from "@/components/uni_ui/upimg.vue";
import { getIndexNav, createArticle } from "@/api/api";
export default {
  components: { upimg },
  computed: {
    // 判断图片
    isShow() {
      if (this.imgLists.length === 0) {
        return false;
      } else {
        return true;
      }
    },
    // 返回分类的数组
    classData() {
      return this.array.map((item) => item.classname);
    },
    // 返回图片数据的id
    imgIds() {
      return this.imgLists.map((item) => {
        return {
          id: item.id,
        };
      });
    },
  },
  data() {
    return {
      imgLists: [],
      text: "",
      // 分类
      classify: "#请选择分类",
      // 话题
      topic: "#请选择话题",
      topList: ["仅自己可见", "所有人可见"],
      array: [],
      index: 0,
      isopen: 1, //是否自己可见 0为是
      topic_id: 0, //话题id
      post_class_id: 0, //分类id
      ispublish: false,
    };
  },
  mounted() {
    uni.$on("selectToPic", (res) => {
      console.log(res);
      this.topic = "#所属话题：" + res.title;
      this.topic_id = res.id;
    });
    // 获取分类信息
    this.getClassify();
  },

  methods: {
    // 发布
    async publish() {
      if (this.text === "" && this.imgLists.length === 0) {
        uni.showToast({ title: "请输入内容或上传图片", icon: "none" });
        return;
      }
      if (this.topic_id === 0) {
        uni.showToast({ title: "请选择话题再发布", icon: "none" });
        return;
      }
      if (this.post_class_id === 0) {
        uni.showToast({ title: "请选择分类再发布", icon: "none" });
        return;
      }

      let obj = {
        imglist: JSON.stringify(this.imgIds),
        text: this.text, //内容
        isopen: this.isopen, //是否自己可见 0为是
        topic_id: this.topic_id, //话题id
        post_class_id: this.post_class_id, //分类id
      };
      this.ispublish = true;
      let res = await createArticle(obj);
      console.log(res);
      if (res.data.msg === "发布成功") {
        uni.$emit("getDate");
        uni.showToast({ title: "发布成功", icon: "none" });
        setTimeout(() => {
          uni.navigateBack();
        }, 500);
      } else {
        uni.showToast({ title: "发布失败，请稍后在试", icon: "none" });
      }
      console.log(obj);
    },
    // 选择仅自己or全部人可见
    topClick(e) {
      this.isopen = e.detail.value;
    },
    // 选择好分类
    bindPickerChange(e) {
      // console.log(this.array[e.detail.value].id);
      // 获取到的分类id给到要传递的数据中
      this.post_class_id = this.array[e.detail.value].id;
      this.classify = "#所属分类：" + this.array[e.detail.value].classname;
    },
    // 选择话题
    clicktoPic() {
      // console.log("话题");
      uni.navigateTo({
        url: "../topic-classify/topic-classify?input=true",
      });
    },
    // 获取分类的数据
    async getClassify() {
      let res = await getIndexNav();
      console.log(res.list);
      this.array = res.list;
    },

    // 返回上一层
    clickLeft() {
      uni.navigateBack({});
    },
    imgList(e) {
      this.imgLists = e;
      //   console.log(e);
    },
    // 上传图片
    upimg() {
      this.$refs.upimg.chooseImage();
    },
  },
  //   监听用户返回
  onBackPress(e) {
    // console.log("返回到上一个页面");
    // 判断是否有数据 如果有数据就使用 uni的提示框提示是否要报错为草稿
    // 如果要报错就存储到uni.setstorageSync中 取消的话直接清除
    if (!this.ispublish) {
      if (this.imgLists.length > 0 || this.value !== "") {
        console.log("判断");
        uni.showModal({
          title: "提示",
          content: "是否需要保存为草稿",
          success: (res) => {
            if (res.confirm) {
              console.log("用户点击确定");
              let addDate = {
                value: this.value,
                imgList: this.imgLists,
              };
              // console.log(this.imgLists);
              uni.setStorageSync("addinput", JSON.stringify(addDate));
            } else if (res.cancel) {
              // console.log("用户点击取消");
              uni.removeStorageSync("addinput");
            }
          },
        });
      } else {
        console.log("直接返回");
      }
    }
  },
  onLoad() {
    // uni.removeStorageSync("addinput");
    let res = uni.getStorageSync("addinput")
      ? JSON.parse(uni.getStorageSync("addinput"))
      : {};
    console.log(res);
    if (JSON.stringify(res) !== "{}") {
      //   console.log(res.imgList);
      this.value = res.value;
      this.imgLists = res.imgList;
      //   console.log(res.imgList);
      //   console.log(this.imgLists);
      //   console.log(res);
    }
  },
};
</script>

<style lang="less">
.content {
  padding: 22rpx;
}
.bottom {
  line-height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0 22rpx;
  right: 0;
  .b-left {
    text {
      color: #000;
      font-weight: 800;
      margin-right: 35rpx;
      font-size: 50rpx;
    }
  }
  .b-right {
    color: #fff;
    width: 140rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 10rpx;
    background-color: #ff587c;
  }
}
.uni-input {
  height: 100px;
}
</style>
